
<template>
  <div class="header-container" >

    <el-dialog
        title="我的消息"
        :visible.sync="dialogVisible"
        width="40%">
      <el-table
          :data="messageList"
          style="width: 100%">
        <el-table-column
            prop="userName"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="content"
            label="消息内容"
            width="180">
        </el-table-column>
        <el-table-column
            prop="time"
            label="时间">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-refresh" @click="getMessages">刷 新</el-button>
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <div class="l-content">
      <el-button icon="el-icon-menu" size="mini" @click="changeMenuStatus" style="margin-right: 20px"></el-button>
<!--      <span class="text">{{title}}</span>-->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in tags" :key="item.id" :to="{path : item.path !== $route.path ? item.path : null}" @click="()=>{
            console.log(111)
          }">{{item.label}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link" style="padding-right: 10px">
          <el-avatar :size="50" :src="avatarURL" ></el-avatar>
<!--          <img src="../assets/images/OIP-C.jpg" class="header-img">-->
        </span>
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item command="openTag">我的消息</el-dropdown-item>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import avatarURL from '../assets/images/OIP-C.jpg'
import moment from "moment/moment";
export default {
  data () {
    return {
      avatarURL:avatarURL,
      dialogVisible: false,
      messageList:[],
      path:"ws://localhost:51803/websocket",
      ws:{}
    }
  },
  methods:{
    wsInit(){
      // 实例化socket，这里的实例化直接赋值给this.ws是为了后面可以在其它的函数中也能调用websocket方法，例如：this.ws.close(); 完成通信后关闭WebSocket连接
      this.ws = new WebSocket(this.path)

      /*this.ws.addEventListener('beforeSend', function(event) {
        event.target.setRequestHeader('token', localStorage.getItem('token').toString());
      });*/



      //监听是否连接成功
      this.ws.onopen = ()=> {
        console.log('ws连接状态：' +this.ws.readyState);
        //连接成功则发送一个数据
        this.ws.send('连接成功');
      }

      //接听服务器发回的信息并处理展示
      this.ws.onmessage = (data)=> {
        console.log('接收到来自服务器的消息：');
        this.$message({
          message:data.data,
          type:"success"
        })
        console.log(data)
      }

      //监听连接关闭事件
      this.ws.onclose = ()=>{
        //监听整个过程中websocket的状态
        console.log('ws连接状态：' + this.ws.readyState);
      }

      //监听并处理error事件
      this.ws.onerror = function(error) {
        console.log(error);
      }

    },
    getMessages(){
      this.axios.get('http://115.159.84.44:24576/wemedia/backend/v1/wemedia/messages', {
        headers: {
          'token': localStorage.getItem('token')
        },
      }).then((res) => {

        this.messageList = res.data.data
        for (let i = 0; i < this.messageList.length; i++) {
          this.messageList[i].time = this.formattedDate(this.messageList[i].time)
          // console.log(this.messageList[i].time)
          // console.log(this.formattedDate(this.messageList[i].time))
        }
      });
    },
    formattedDate(date) {
      var da = new Date(date);
      var year = da.getFullYear()+'年';
      var month = da.getMonth()+1+'月';
      var date = da.getDate()+'日';
      var hour = da.getHours()+"时"
      var minute = da.getMinutes()+"分"
      var second = da.getSeconds()+"秒"
      let res = [year,month,date,hour,minute,second].join('-');
      return res
      // return moment(date).format('YYYY-MM-DD HH:MM:SS'); // 使用 Moment.js 格式化日期
    },
    handleCommand(command){
      console.log(command)
      if(command === 'logout'){
        localStorage.removeItem("token")
        localStorage.removeItem("name")
        localStorage.removeItem("password")
        this.$store.commit('changeTokenStatus',false)
        this.$router.push("/login")
        console.log("logout")
      }
      if(command === 'openTag'){
        console.log(1)
        this.dialogVisible = true
      }
    },
    changeMenuStatus(){
      this.$store.commit('changeCollapse')
    },
    clickTag(item){
      console.log(item)
      // for (let key in item){
      //
      //   console.log(key ," ",item[key])
      // }
      return item.path === this.$route.path ? null : item.path
    }
  },
  computed:{
    title(){
      return this.$store.state.header.title
    },
    ...mapState({
        tags: state => state.tab.tabsList})
  },
  mounted() {
    console.log("tags",this.tags)
    this.getMessages()
    this.wsInit()
  },

}
</script>

<style lang="less" scoped>
.header-container{
  padding-left: 20px;
  height: 60px;
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text{
    color: white;
    font-size: 14px;
    margin-left: 10px;
  }
  .r-content{
    .header-img{
      width: 40px;
      height: 40px;
      border-radius: 50%;

    }
  }
  .l-content{
    display: flex;
    align-items: center;
    /deep/.el-breadcrumb__item{
      .el-breadcrumb__inner{
        font-weight: normal;
        &.is-link {
          color: #666;
        }
      }
      &:last-child{
        .el-breadcrumb__inner{
          color: white;
        }
      }
    }
  }
}
</style>